<style lang="less">
.contact-dialog .el-dialog__body {
  min-height: auto;
}
</style>
<template>
  <iot-blk
    class="realtime-blk"
    title="实时报警"
    :moreType="2"
    size="big"
    @more="moreAction"
  >
    <ul class="realtime-list">
      <li
        v-for="(item, index) in dataList"
        :key="index"
        @click="handleAction(item)"
      >
        <div class="name flex">
          <h2 class="flex-1">{{ item.businessName }}：{{ item.position }}</h2>

          <p class="opers">
            <!-- <a href="javascript:;" title="定位"><i class="iconfont icon-loc"></i></a> -->
            <a href="javascript:;" title="处置"
              ><i class="iconfont icon-handle"></i
            ></a>
            <a
              href="javascript:;"
              title="电话"
              @click.stop.prevent="openContact(item)"
              ><i class="iconfont icon-tel"></i
            ></a>
            <a href="javascript:;" title="监控"
              ><i class="iconfont icon-camera"></i
            ></a>
          </p>
        </div>
        <p class="infos">
          <span>报警设备:{{ item.deviceName }}</span>
          <span>报警原因:{{ item.content }}</span>
          <span>{{ item.alarmtime }}</span>
        </p>
      </li>
      <li class="no-data" v-if="dataList.length == 0">
        暂无报警信息
      </li>
    </ul>
    <!-- more start -->
    <el-dialog
      v-if="moreModalVisible"
      title="报警信息"
      :visible.sync="moreModalVisible"
      :width="950 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      style="z-index:9999"
    >
      <List :type="type" :scale="scale"></List>
    </el-dialog>
    <!-- more end -->
    <!-- contact start -->
    <el-dialog
      v-if="contactModalVisible"
      class="contact-dialog"
      title="联系电话"
      :visible.sync="contactModalVisible"
      :width="650 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
    >
      <el-table
        :data="contactList"
        style="width: 100%"
        v-loading="contactLoading"
      >
        <el-table-column prop="typeName" label="职责"></el-table-column>
        <el-table-column prop="personName" label="姓名"></el-table-column>
        <el-table-column prop="personPhone" label="电话"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- contact end -->
    <!-- 处置 start -->
    <AlarmHandle
      v-if="handleModalVisible"
      :visible.sync="handleModalVisible"
      :activeAlarm="activeData"
      :activeDevice="alarmDevice"
      :autoClose="false"
      @success="submitSuccessAction"
      @showMonitor="showMonitor"
    >
      <el-button
        type="cancel"
        @click="closeDoor"
        v-if="alarmDevice && alarmDevice.productId == 6002"
        >远程关门</el-button
      >
      <el-button
        type="cancel"
        @click="showPlayback"
        v-if="alarmDevice && alarmDevice.productId == 6002"
        >鹰眼回放</el-button
      >1
    </AlarmHandle>
    <!-- <el-dialog
            v-if="handleModalVisible"
            title="报警处置"
            :visible.sync="handleModalVisible"
            :width="500 * scale + 'px'"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
        >
            <Handle
                ref="handle"
                :scale="scale"
                :activeData="activeData"
                :alarmDevice="alarmDevice"
                @success="submitSuccessAction"
                @fail="handling = false"
                @submitting="handling = true"
                @cancel="handleModalVisible = false"
                @closeDoor="onDoorClosed"
            >
            </Handle>
            <div slot="footer" v-if="!activeData.isHandle">
                <el-button
                    type="cancel"
                    @click="closeDoor"
                    v-if="alarmDevice && alarmDevice.productId == 6002"
                    >远程关门</el-button
                >
                <el-button
                    type="cancel"
                    @click="showPlayback"
                    v-if="alarmDevice && alarmDevice.productId == 6002"
                    >鹰眼回放</el-button
                >
                <el-button
                    type="cancel"
                    @click="showMonitor"
                    v-if="alarmDevice && alarmDevice.productId == 6002"
                    >鹰眼e通</el-button
                >
                <el-button type="cancel" @click="cancelHandle">取消</el-button>
                <el-button
                    type="primary"
                    :loading="handling"
                    @click="submitAction"
                    :disabled="!$store.getters.hasEditPermission"
                    >处置</el-button
                >
            </div>
            <div slot="footer" v-else>
                <el-button type="cancel" @click="handleModalVisible = false">确定</el-button>
            </div>
        </el-dialog> -->
    <!-- 处置 end -->
    <!-- 设备详情 start -->
    <el-dialog
      v-if="detailModalVisible"
      title="设备详情"
      :visible.sync="detailModalVisible"
      :width="1000 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <DeviceDetail
        ref="detail"
        :rfid="alarmDevice.rfid"
        :id="alarmDevice.id"
        :productId="alarmDevice.productId"
        :classify="alarmDevice.deviceClassify"
        :number="alarmDevice.number"
        :scale="scale"
        @cancel="detailModalVisible = false"
      >
      </DeviceDetail>
    </el-dialog>
    <!-- 设备详情 end -->
    <!-- 鹰眼回放 start -->
    <el-dialog
      v-if="playbackModalVisible"
      title="鹰眼回放"
      :visible.sync="playbackModalVisible"
      :width="1600 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <Playback
        ref="Playback"
        :startTime="startTime"
        :endTime="endTime"
        :number="alarmDevice.number"
        :scale="scale"
        @cancel="playbackModalVisible = false"
        @chooseTime="chooseTimeAction"
      >
      </Playback>
    </el-dialog>
    <!-- 鹰眼回放 end -->
    <!-- 选择时间 start -->
    <el-dialog
      class="contact-dialog"
      v-if="playbackTimeModalVisible"
      title="选择回放时间段"
      :visible.sync="playbackTimeModalVisible"
      :width="550 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <el-form :inline="true" class="filter-blk flex-1">
        <el-form-item>
          <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmTime">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 选择时间 end -->
  </iot-blk>
</template>
<script>
import { mapState } from "vuex";
import List from "@/components/iot/AlarmList.vue";
import Handle from "@/components/HandleAlarm.vue";
import DeviceDetail from "@/components/device/DeviceDetail.vue";
import Playback from "@/components/device/Playback.vue";
import AlarmHandle from "@/components/iot/AlarmHandle";
export default {
  name: "HomeHeader",
  components: {
    List,
    Handle,
    DeviceDetail,
    Playback,
    AlarmHandle,
  },
  props: {
    type: {
      type: String,
      default: "fireControl",
    },
  },
  computed: {
    ...mapState(["scale"]),
  },
  watch: {},
  data() {
    return {
      dataList: [],
      moreModalVisible: false,
      contactModalVisible: false,
      contactList: [],
      contactLoading: false,
      handleModalVisible: false,
      handling: false,
      activeData: null,
      alarmDevice: null,
      detailModalVisible: false,
      playbackModalVisible: false,
      endTime: "",
      startTime: "",
      timeRange: [],
      playbackTimeModalVisible: false,
    };
  },
  methods: {
    getData() {
      // this.dataList = [
      //     {
      //         businessName: "潍坊市奎文区老潍县肉火烧",
      //         deviceType: "NB-可燃气体监测",
      //         alarmTypeName: "丙烷浓度:5.0m/s;设备状态:报警;信号量:3.0;通信类型:NB",
      //         position: "地址:潍坊市奎文区老潍县肉火烧",
      //         alarmtime: "2020-05-27 20:18:10",
      //     },
      //     {
      //         businessName: "潍坊市奎文区老潍县肉火烧",
      //         deviceType: "NB-可燃气体监测",
      //         alarmTypeName: "丙烷浓度:5.0m/s;设备状态:报警;信号量:3.0;通信类型:NB",
      //         position: "地址:潍坊市奎文区老潍县肉火烧",
      //         alarmtime: "2020-05-27 20:17:59",
      //     },
      // ]
      // return
      let url = "";
      switch (this.type) {
        case "pool":
          url = "/firewater/firewater/realTimeAlarm";
          break;
        case "smoke":
          url = "/independentsmoke/independentsmoke/realTimeAlarm";
          break;
        case "monitor":
          url =
            "/firefightingvisualization/firefightingvisualization/realTimeAlarm";
          break;
        case "fire":
          url = "/electricfire/electricfire/realTimeAlarm";
          break;
        case "chargingStation":
          url = "/chargingStation/chargingStation/realTimeAlarm";
          break;
        case "gas":
          url = "/combustiblegas/combustiblegas/realTimeAlarm";
          break;
        case "fireControl":
        case "warehouse":
          url = "/fireFightingIOT/fireFightingIOT/realTimeAlarm";
          break;
        case "extinguisher":
          url = "/fireExtinguisher/fireExtinguisher/realTimeAlarm";
          break;
        case "auto":
          url = "/autoNet/autoNet/realTimeAlarm";
          break;
        case "gasStation":
          url =
            "/firefightingvisualization/firefightingvisualization/gasStationRealTimeAlarm";
          break;
        case "ladderControl":
          url =
            "/firefightingvisualization/firefightingvisualization/ladderControlRealTimeAlarm";
          break;
        case "waters":
          url =
            "/firefightingvisualization/firefightingvisualization/watersRealTimeAlarm";
          break;
        case "eye":
          url =
            "/firefightingvisualization/firefightingvisualization/realTimeAlarm";
          break;
        case "kitchen":
          url =
            "/firefightingvisualization/firefightingvisualization/brightKitchenRealTimeAlarm";
          break;
        case "waterPump":
          url = "/waterPump/waterPump/realTimeAlarm";
          break;
        default:
          url =
            "/firefightingvisualization/firefightingvisualization/realTimeAlarm";
          break;
      }
      if (!url) return;
      this.$get(url).then(
        (res) => {
          this.dataList = res.data;
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    moreAction() {
      this.moreModalVisible = true;
    },
    getContact(id) {
      this.contactLoading = true;
      this.$get("/business/business/detail", { id: id }).then(
        (res) => {
          this.contactLoading = false;
          let info = res.data;
          const temp = res.data.businessCustomizeManagePersonList || [];
          const firstPerson = {
            typeName: "消防第一负责人",
            personName: info.oneResponPersonName || "-",
            personPhone: info.oneResponPersonPhone || "-",
          };
          this.contactList = [...[firstPerson], ...temp];
        },
        (err) => {
          this.contactLoading = false;
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    openContact(item) {
      this.contactList = [];
      this.getContact(item.businessId);
      this.contactModalVisible = true;
    },
    getDataById(id, cbk) {
      this.$get("/fireFightingIOT/historicalAlarmInfo/detail", {
        id: id,
      }).then(
        (res) => {
          let alarmData = res.data;
          this.getDeviceDetail(
            res.data.deviceClassify,
            res.data.number,
            (deviceData) => {
              cbk && cbk(alarmData, deviceData);
            }
          );
        },
        (err) => {
          //
        }
      );
    },
    getDeviceDetail(deviceClassify, number, cbk) {
      this.$get("/fireFightingIOT/device/detail", {
        deviceClassify: deviceClassify,
        number: number,
        id: "",
      }).then(
        (res) => {
          cbk && cbk(res.data);
        },
        (err) => {
          //
        }
      );
    },
    closeDoor() {
      this.$refs.handle.closeDoor();
    },
    onDoorClosed() {
      //
    },
    showMonitor() {
      this.detailModalVisible = true;
    },
    showPlayback() {
      this.playbackTimeModalVisible = true;
      let today = new Date().Format("yyyy-MM-dd");
      this.timeRange = [today + " 00:00:00", today + " 23:59:59"];
    },
    confirmTime() {
      if (this.timeRange.length == 0) {
        this.$message.error("请选择起始时间");
        return;
      }
      this.startTime = this.timeRange[0];
      this.endTime = this.timeRange[1];
      this.playbackModalVisible = true;
    },
    chooseTimeAction() {
      this.playbackModalVisible = false;
      this.showPlayback();
    },
    cancelHandle() {
      this.handleModalVisible = false;
      this.alarmDevice = null;
    },
    handleAction(item) {
      this.activeData = null;
      this.getDataById(item.id, (data, deviceData) => {
        this.activeData = data;
        this.alarmDevice = deviceData;
        this.handleModalVisible = true;
      });
    },
    submitAction() {
      this.$refs.handle.submitAction();
    },
    submitSuccessAction() {
      this.handleModalVisible = false;
      this.alarmDevice = null;
      this.handling = false;
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>
